<template>
    <div id="box">
        <el-card>
            <template v-slot:header>
                <h1>{{ title }}</h1>
            </template>

            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                style="width: 60%;"
                size="mini"
            >
                <el-form-item label="方案名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>

                <el-form-item label="类型" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择">
                        <el-option v-for="item in types" :value="item">{{ item }}</el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="起征点" prop="startNum" v-if="flag">
                    <el-input v-model="ruleForm.startNum" type="number" style="width: 100px"></el-input>
                </el-form-item>

                <el-form-item label="个税结果" prop="minNum" v-if="flag">
                    <el-input v-model="ruleForm.minNum" type="number" style="width: 100px"></el-input>
                </el-form-item>
            </el-form>

            <div class="footer">
                <el-button size="mini" @click="$router.back()">返回</el-button>
                <el-button size="mini" @click="$router.back()">取消</el-button>
                <el-button size="mini" type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        var startNum = (rule, value, callback) => {
            if (value.length > 4) {
                callback(new Error('起征点过大'))
            } else {

                callback()
            }
        };
        var minNum = (rule, value, callback) => {
            if (value.length > 1) {
                callback(new Error('个税结果只能为个位数'))
            } else {

                callback()
            }
        };
        return {
            flag: false,
            title:'',
            types: [
                '工资薪金所得税',
                '劳务报酬所得税',
                '不计税'
            ],
            ruleForm: {
                name: '',
                type: '',
                startNum: '',
                minNum: ''
            },
            rules: {
                name: [
                    {required: true, message: '请输入方案名称', trigger: 'blur'},
                ],
                type: [
                    {required: true, message: '请选择类型', trigger: 'blur'},
                ],
                startNum: [
                    {required: true, message: '请输入起征点', trigger: 'blur'},
                    {validator: startNum, trigger: 'change'}
                ],
                minNum: [
                    {required: true, message: '请输入保留几位小数', trigger: 'blur'},
                    {validator: minNum, trigger: 'change'}
                ]
            }
        };
    },
    mounted() {
        let {isAdd} = this.$route.query
        if (!eval(isAdd)) {
            //     false为修改，将表单中的数据填回去
            this.ruleForm.minNum = this.$route.query.minNum
            this.ruleForm.name = this.$route.query.name
            this.ruleForm.startNum = this.$route.query.startNum
            this.ruleForm.type = this.$route.query.type
            this.title = '修改'
        }else{
            this.title = '添加'
        }
    },
    watch: {
        ruleForm: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                if (newValue.type === '不计税') {
                    this.flag = false
                } else {
                    this.flag = true
                }
            }
        }
    },
    methods: {
        submitForm(formName) {
            let {isAdd} = this.$route.query
            if (eval(isAdd)) {
                //     true为添加
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        await this.$axios.get('/tax/ruleAdd', {
                            params: {
                                obj: this.ruleForm
                            }
                        })
                        this.resetForm('ruleForm')
                        this.$message.success('添加规则成功')
                        this.$router.back()

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            } else {
                //     false为修改
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        await this.$axios.post('/tax/ruleEdit',
                            {...this.ruleForm, id: this.$route.query._id}
                        )
                        this.resetForm('ruleForm')
                        this.$message.success('添加规则成功')
                        this.$router.back()

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            }

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>

<style lang="scss" scoped>
#box {
    height: 100%;

    .el-card {
        height: 100%;
        position: relative;
        overflow: hidden;

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            border-top: 1px #f0f0f0 solid;
            padding: 20px;
        }
    }

}
</style>
